<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
  数组变动侦测
Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
对于一些不可变 (immutable)方法，例如 fi1ter()，concat()和 s1ice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的:
this.items = this.items.filter((item)=>
item.message.match(/Foo/))

 -->
    <div id="app">
        <ul>
            <li v-for="item in datalist" :key="item">{{item}}</li>
        </ul>
        <button @click="handleClick">click</button>


    </div>
    <script>
        var obj = {
            data() {
                return {
                    datalist: ["111", "222", "333"]
                }
            },
            methods: {
                handleClick() {
                    // this.datalist[0] = 'zhj'
                    var list = this.datalist.map(item => "zhj" + item)
                        // map:输入为item,
                        // 输出为zhj 为了消除控制台key重复警告加上item。+item（映射）
                    console.log(list, this.datalist); //前面为新数组，后面为原数组
                    // (3) ['zhj', 'zhj', 'zhj']新数组
                    //  Proxy(Array) {0: '111', 1: '222', 2: '333'}原数组
                    // 可以看到，原数组并没有改变，而新数组已经改变。页面
                    // 显示没有同时改变。不改变原数组，页面就不会改变。vue没有侦测到数组变动。
                    // 如果想要页面同时改变，就把新数组
                    // 赋值给原数组。
                    // 除了map,例如 fi1ter()，concat()和 s1ice()
                    // 这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数
                    // 组替换为新的，以触发视图更新。
                    this.datalist = list
                }
            }
        }

        var app = Vue.createApp(obj).mount('#app')
    </script>
    <!-- 在控制台中输入app.datalist[0]='zhj'，页面同时会改变显示，说明数组变动就会被侦测到。 同样app.datalist.push('444'); app.datalist.pop()等也能被侦测到。在vue2中侦测不到。-->
</body>

</html>